<template>
  <div
    style="height: 523px; overflow: hidden; background: white; border:1px solid white ; border-radius: 8px; margin-top: 10px;">
    <div style="margin-top: 14px;">
      <h5 style="text-align: left; margin-left: 14px;"> 符合条件的设计单总数：{{this.tableData.length}} 例</h5>
      <h5 style="text-align: left; margin-left: 14px;">
        <span style="color: red;">其中等待执行的设计单总数：{{this.dendai}}例&nbsp;&nbsp;</span>
        <!-- 其中正在执行的生产派工单总数：7例,-->
        <span style="color: blue;">其中完成的设计单总数:{{this.wc}}例&nbsp;&nbsp;</span>

      </h5>
    </div>
    <div style="background-color: #E9EEF3; height: 450px; margin: 10px; padding: 4px; border-radius: 7px;">
      <template>
        <el-table :data="tableData" style="width: 100%;height: 400px;">
          <el-table-column prop="pducess_id" label="设计单编号" width="150">
          </el-table-column>
          <el-table-column prop="proSige_id" label="产品编号" width="150">
          </el-table-column>
          <el-table-column prop="pName" label="产品名称" width="150">
          </el-table-column>
          <el-table-column prop="designer" label="设计人" width="150">
          </el-table-column>
          <el-table-column prop="regtime" label="登记时间" width="160">
          </el-table-column>
          <el-table-column prop="gongShiPrice" label="工时总成本" width="150">
          </el-table-column>
          <el-table-column label="查看" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="zhisjd(scope.row)" round="">查看</el-button>
            </template>
          </el-table-column>

        </el-table>
      </template>
      <div class="block" style="margin-top: 15px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
          :page-sizes="[1,2,7]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div><!-- scpgdsh -->
    <el-drawer title="生产派工单" size="100%" :visible.sync="drawer" direction="ttb" :before-close="handleClose">
      <div style="text-align: center; margin-left: 755px; margin-top: 0px;">
        <span slot="footer" class="dialog-footer">
          <el-button style="width: 45px ; height: 35px;" type="info" @click="scjfds()">返回</el-button>
          <el-button style="width: 75px ; height: 35px;" type="primary" @click="addProcess()">添加工序</el-button>
          <el-button style="width: 75px ; height: 35px;" type="success" @click="replaceProcess()">重新提交</el-button>
        </span>
      </div>
      <div class="body_main">
        <div style="padding: 13px;">
          <el-form :model="proproSheet">
            <el-row>
              <el-col :span="14" style="text-align: left;">
                <span class="span_01">产品名称:{{this.proproSheet.pName}}</span>

              </el-col>
              <el-col :span="10" style="text-align: right;">
                <span class="span_01">产品编号:{{this.proproSheet.proSige_id}}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 8px;">
              <el-col :span="8" style="text-align: left;">
                <span class="span_01">设计人:</span>
                <input type="text" v-model="proproSheet.designer" style="width: 90px;" class="input_01" />
              </el-col>
              <el-col :span="16" style="text-align: right;">
                <span class="span_01">设计单编号:{{proproSheet.pducess_id}}</span>

              </el-col>
            </el-row>
            <el-table border :data="tableData2" tooltip-effect="dark"
              style="width: 100%;margin-top: 26px;overflow: scroll;height: 178px;" size="mini">
              <el-table-column type="index" width="210">
              </el-table-column>
              <el-table-column prop="processesName" label="工序名称" width="120">
              </el-table-column>
              <el-table-column label="工时数" width="120">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.gongShiNum" controls-position="right" size="mini" style="width: 75px"
                    class="inputClass">
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column label="工时单位" width="120">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.gSunit" controls-position="right" size="mini" style="width: 75px"
                    class="inputClass">
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column label="单位工时成本" width="120">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.unitGSPrice" controls-position="right" size="mini" style="width: 75px"
                    class="inputClass">
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column prop="gSsumPrice" label="工时成本小计(元)" width="120">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.gSsumPrice =scope.row.gongShiNum*scope.row.unitGSPrice"
                    controls-position="right" size="mini" style="width: 75px" class="inputClass">
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column label="移除" width="120">
                <template slot-scope="scope">
                  <el-button style="width: 45px ; height: 25px;" @click="remove()" type="danger">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-row style="margin-top: 32px">
              <el-col :span="16">
                <h5 style="text-align: left;">工时总成本:{{this.proproSheet.gongShiPrice}}</h5>
              </el-col>
            </el-row>
            <el-row style="margin-top: 6px">
              <el-col :span="16">
                <h5 style="text-align: left;">变更人:
                  <input type="text" v-model="proproSheet.redner" style="width: 90px;" class="input_01" />
                </h5>

              </el-col>
              <el-col :span="8">
                <h5 style="text-align: right;">变更时间:{{this.proproSheet.regtime}}</h5>
              </el-col>
            </el-row>
            <el-row style="margin-top: 6px;text-align: left;">
              <el-col :span="16">

                <sapn class="span_01">设计要求:</sapn>
                <textarea v-model="proproSheet.designreq" style="margin: 0px; width: 952px; height: 61px;">
                </textarea>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </el-drawer>
    <el-dialog title="添加工序" :visible.sync="dialogVisible2" width="62%" height="300px" :before-close="handleClose">
      <el-table border ref="multipleTable" :data="tableData3" tooltip-effect="dark"
        style="width: 100%;margin-top: 25px;" @selection-change="handleSelectionChange2" size="mini">
        <el-table-column type="selection" width="55" size="mini">
        </el-table-column>
        <el-table-column label="工序编号" width="140">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column prop="gxname" label="工序名称" width="140">
        </el-table-column>
        <el-table-column prop="desc" label="工序描述" width="140">
        </el-table-column>
        <el-table-column prop="personNo" label="负责人编号" width="140">
        </el-table-column>
        <el-table-column label="变更" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="add_processByOne(scope.row.id)" round="">添加工序</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 15px;">
        <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2" :current-page="pageNum2"
          :page-sizes="[1,2,7]" :page-size="pageSize2" layout="total, sizes, prev, pager, next, jumper" :total="total2">
        </el-pagination>
      </div>
      <span slot="footer">
        <el-button style="width: 45px ; height: 25px;" @click="dialogVisible2 = false">关闭</el-button>
        <el-button style="width:  80px ; height: 25px;" type="primary" @click="addBatch()"
          :disabled='multipleSelection.length>0?false:true'>批量添加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'repset',
    data() {
      return {
        dialogVisible2: false,
        tableData3: [],
        dendai: 0,
        wc: 0,
        shNum: 0,
        zhixNum: 0,
        wcNum: 0,
        processesName: '',
        pageNum: 1,
        pageSize: 7,
        total: 0,
        pageNum2: 1,
        pageSize2: 7,
        total2: 0,
        tableData: [],
        tableData2: [],
        dialogVisible3: false,
        multipleSelection: [],
        drawer: false,
        makepsDto: {
          proproSheet: '',
          dproList: []
        },
        proproSheet: {
          redner: '', //登记人员 变更人员
          pducess_id: 0,
          pName: '',
          proSige_id: 0,
          designer: '', //设计人
          gongShiPrice: '', //工时总成本
          thereviewer: '', //审核人
          audittime: '', //审核时间
          designreq: '', //设计要求
          regtime: '',
          wuliaoSumPrice: 0,
          gongxueSigin: '',
        },
        formLabelWidth: '120px',
        form: {
          num: 0,
          sjnum: 0
        },
      }
    },
    methods: {
      add_processByOne(id) {
        var num = this.tableData3.findIndex(item => {
          if (id == item.id) {
            return true;
          }
        });
        var new_table_item = {
          pducess_id: this.proproSheet.pducess_id,
          proSige_id: this.proproSheet.proSige_id,
          processesName: this.tableData3[num].gxname,
          processesDes: '',
          processesid: this.tableData3[num].id,
          unitGSPrice: 0,
          gongShiNum: 0,
          gSsumPrice: 0,
          gSunit: '',
          pucess_gid: 0,
          wugCount: 0,
          isgxwl: ''
        };
        if (this.tableData2.length == 0) {
          this.tableData2.push(new_table_item);
        } else {
          var falg = false;
          for (var i = 0; i < this.tableData2.length; i++) {
            if (this.tableData2[i].processesid == this.tableData3[num].id) {
              falg = true;
            }
          }
          if (!falg) {
            this.tableData2.push(new_table_item);
          }
        }
      },

      addBatch() {
        var newarray = this.multipleSelection;
        var newlen = this.tableData3;
        for (var i = 0; i < this.multipleSelection.length; i++) {


          var num = this.tableData3.findIndex(tab => {
            if (this.multipleSelection[i] == tab.id) {
              return true;
            }
          })


          var new_table_item = {
            pducess_id: this.proproSheet.pducess_id,
            proSige_id: this.proproSheet.proSige_id,
            processesName: this.tableData3[num].gxname,
            processesDes: '',
            processesid: this.tableData3[num].id,
            unitGSPrice: 0,
            gongShiNum: 0,
            gSsumPrice: 0,
            gSunit: '',
            pucess_gid: 0,
            wugCount: 0,
            isgxwl: ''
          };
          if (this.tableData2.length == 0) {
            this.tableData2.push(new_table_item);
          } else {
            var falg = false;
            for (var j = 0; j < this.tableData2.length; j++) {
              if (this.tableData2[j].processesid == this.tableData3[num].id) {
                falg = true; //前端传数组后端用集合接收
              }
            }
            if (!falg) {
              this.tableData2.push(new_table_item);
            }
          }
          this.dialogVisible2 = false;
        }
      },
      replaceProcess() {
        var len = this.tableData2.length;
        if (len != 0) {
          if (confirm('确认重新提交?')) {
            this.makepsDto.proproSheet = this.proproSheet;
            this.makepsDto.dproList = this.tableData2;
            this.$http.post('production/product/replaceProcess', this.$qs.stringify(this.makepsDto, {
              arrayFormat: 'list',
              allowDots: true
            })).then(res => {
              if (res.status == 200) {
                this.drawer = false;
                this.GetOnline(this.pageNum, this.pageSize);
              }
            }).catch(err => {
              console.log(err);
            })
          }
        } else {
          this.$message.error('至少要保留一道工序!');
        }
      },
      addProcess() {
        this.addpro(this.pageNum2, this.pageSize2);
        this.dialogVisible2 = true;
      },
      addpro(pageNum, pageSize) {
        var data = new URLSearchParams();
        data.append("pageNum", pageNum);
        data.append("pageSize", pageSize);
        this.$http.post('production/product/getList  ', data).then(res => {
          this.pageNum2 = res.data.pageNum;
          this.pageSize2 = res.data.pageSize;
          this.total2 = res.data.total;
          this.tableData3 = res.data.rows;
        }).catch(err => {
          console.log(err);
        })
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);

          });
        } else {
          this.$refs.multipleTable.clearSelection();
          this.multipleSelection = [];

        }
      },
      handleSelectionChange2(val) {
        this.multipleSelection = [];
        for (var i = 0; i < val.length; i++) {
          this.multipleSelection.push(val[i].id)
        }
        console.log(this.multipleSelection);
      },
      scjfds() {
        this.drawer = false;
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.GetOnline(this.pageNum, this.pageSize);
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.GetOnline(this.pageNum, this.pageSize);
      },
      handleSizeChange2(val) {
        this.pageSize2 = val;
        this.addpro(this.pageNum2, this.pageSize2);
      },
      handleCurrentChange2(val) {
        this.pageNum2 = val;
        this.addpro(this.pageNum2, this.pageSize2);
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      remove(data) {
        var index = this.tableData2.findIndex(i => {
          if (data == i) {
            return true;
          }
        })
        this.tableData2.splice(index, 1);
        this.$message({
          message: '删除之后，需要重新提交才能保存',
          type: 'warning',
          duration: 1000
        });

      },
      GetOnline(pageNum, pageSize) {
        var data = new URLSearchParams();
        data.append("pageNum", pageNum);
        data.append("pageSize", pageSize);
        this.$http.post('production/product/cpsjbgfindByPager', data).then(res => {
          console.log(res.data);
          this.pageNum = res.data.pageNum;
          this.pageSize = res.data.pageSize;
          this.total = res.data.total;
          this.tableData = res.data.rows;



          var dendai = 0;
          var wc = 0;
          for (var i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].gongxueSigin == "等待审核") {
              dendai++;
            } else {
              wc++;
            }
          }
          this.dendai = dendai;
          this.wc = wc;
        }).catch(err => {
          console.log(err);
        })
      },
      zhisjd(data) {
        this.proproSheet.regtime = this.getNewDate();
        this.proproSheet.redner = data.redner;
        this.proproSheet.pducess_id = data.pducess_id;
        this.proproSheet.pName = data.pName;
        this.proproSheet.proSige_id = data.proSige_id;
        this.proproSheet.designer = data.designer;
        this.proproSheet.gongShiPrice = data.gongShiPrice;
        this.proproSheet.thereviewer = data.thereviewer;
        this.proproSheet.audittime = data.audittime;
        this.proproSheet.designreq = data.designreq;

        var datas = new URLSearchParams();
        this.$http.post('production/product/cxProducess?pducess_id=' + data.pducess_id).then(res => {
          if (res.length != 0) {
            this.tableData2 = res.data;
            this.drawer = true;


          }
        }).catch(err => {
          console.log(err);
        })

      },
      getNewDate() {
        var date = new Date();
        console.log(date);
        var transverse = "-";
        var Verticalpoint = ":";
        var month = date.getMonth() + 1; //获取月份
        var strDate = date.getDate(); //获取具体的日期
        var strHour = date.getHours(); //获取...钟点
        var strMinute = date.getMinutes(); //获取分钟数
        var strSeconde = date.getSeconds(); //获取秒钟数
        //判断获取月份 、 具体的日期 、...钟点、分钟数、秒钟数 是否在1~9
        //如果是则在前面加“0”
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        console.log(month);
        if (strDate >= 1 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        if (strHour >= 1 && strHour <= 9) {
          strHour = "0" + strHour
        }
        console.log(strHour);
        if (strMinute >= 1 && strMinute <= 9) {
          strMinute = "0" + strMinute;
        }

        if (strSeconde >= 1 && strSeconde <= 9) {
          strSeconde = "0" + strSeconde;
        }
        //时间日期字符串拼接
        var NewDate = date.getFullYear() + transverse + month + transverse + strDate + " " +
          strHour + Verticalpoint + strMinute + Verticalpoint + strSeconde;
        //返回拼接字符串
        return NewDate;
      }
    },
    mounted() {
      this.GetOnline(this.pageNum, this.pageSize);
    }
  }
</script>

<style scoped="scoped">
  .el-input--mini .el-input__inner {
    height: 20px;
    line-height: 28px;
  }

  * {
    padding: 0px;
    margin: 0px;
  }

  .boder_one {
    border-top: none;
    border-left: none;
    border-right: none;
    width: 105px;
  }

  th {
    background-color: blue;
  }

  .el-table tr {
    background-color: royalblue;
  }

  .input_01 {
    border-top: none;
    border-right: none;
    border-left: none;
  }

  .el-breadcrumb__inner {
    color: black;

  }

  .el-input__inner {

    height: 25px;

  }

  .el-input__prefix,
  .el-input__suffix {
    position: absolute;
    top: 7px;
    -webkit-transition: all .3s;
    height: 100%;
    color: #C0C4CC;
    text-align: center;
  }

  .el-table td {
    padding: 10px 0;
  }

  #father {
    height: 480px;
    overflow: hidden;
    background: white;
    border: 1px solid white;
    border-radius: 12px;

  }

  .body_main {
    margin: 0px auto;
    width: 980px;
    height: 445px;
    background-color: white;
    margin-top: 15px;
    border-top: 1px solid #333333;
    border-left: 1px solid #333333;
    border-right: 3px solid #333333;
    border-bottom: 3px solid #333333;
  }

  .span_01 {
    font-size: 14px;
  }

  #sons {
    width: 100%;
    padding: 0px;
    background-color: white;
    margin-top: 15px;
  }

  #son {

    padding: 15px;
    width: 100%;
    background-color: white;

  }

  .input_01 {
    border-top: none;
    border-right: none;
    border-left: none;
  }
</style>
